<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<script src="<c:url value='/resources/js/jquery.dataTables.js'/>" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        /*event ketika selectKabupaten opsi nya dipilih.
        misal ketika kabupaten A terpilih, maka secara otomatis select kecamatan hanya akan menampilkan kecamatan
        dari kabupaten A saja.*/
        $("#selectKabupaten").change(function() {

            /*ambil idKabupaten dari selectKabupaten*/
            var idKabupaten = $("#selectKabupaten").attr("value");

            /*buat select kecamatan hanya berisi opsi pilih*/
            $("select#kecamatan").html("<option value=\"\">--pilih--</option>");

            /*jika idKabupaten null atau kosong, abaikan saja proses pencarian, biarkan select kecamatan hanya beropsi pilih*/
            if (idKabupaten != null && idKabupaten.length > 0) {

                /*ambil data kecamatan berdasarkan idKabupaten dengan JSON*/
                $.getJSON("/prop/kecamatan/kabupaten/"+idKabupaten+".json", function(data) {

                    /*buat tag option baru untuk select kecamatan yang berdasarkan idKabupaten*/
                    var options = "<option value=\"\">--pilih--</option>";
                    for (var i=0;i < data.length;i++){
                        var option = "<option value=\"" + data[i].id + "\">" + data[i].nama + "</option>";
                        options = options.concat(option);
                    }

                    /*pasang tag options dari select kecamatan yang baru*/
                    $("select#kecamatan").html(options);
                });
            }
        });
    });
</script>

<div class="content">
    <c:url value="/kelurahan" var="kelurahan_url"/>

    <form:form action="${kelurahan_url}" method="PUT" modelAttribute="kelurahan">
        <form:hidden path="id" id="id"/>
        <div class="blocksection">
            <div class="blockcontent">
                <h3>Masukkan Perubahan Data Kelurahan</h3>
                <dl class="form-text">

                    <dt><label>Kabupaten :</label></dt>
                    <dd>
                        <select id="selectKabupaten" >
                            <option value="" selected="selected">--pilih--</option>
                            <c:forEach items="${kabupatenList}" var="kabItem">
                                <c:choose>
                                    <c:when test="${kabItem == kelurahan.kecamatan.kabupaten}">
                                        <option value="${kabItem.id}" selected="selected">${kabItem.nama}</option>
                                    </c:when>
                                    <c:otherwise>
                                        <option value="${kabItem.id}">${kabItem.nama}</option>
                                    </c:otherwise>
                                </c:choose>
                            </c:forEach>
                        </select>
                    </dd>

                    <dt>
                        <label for="kecamatan">Kecamatan : </label>
                    </dt>
                    <dd>
                        <form:select path="kecamatan" id="kecamatan">
                            <form:options items="${kecamatanList}" itemValue="id" itemLabel="nama" />
                        </form:select>
                    </dd>
                    <dt>
                        <label for="nama">Nama :</label>
                    </dt>
                    <dd>
                        <form:input path="nama" id="nama"/>
                            <%--
                            <div class="boxinfo">
                                your info text here...
                            </div>
                            <div class="boxinfo success">
                                Username is valid and not in use.
                            </div>--%>
                        <form:errors delimiter="&lt;p/&gt;" cssClass="boxinfo error"
                                     path="nama"/>
                        <p class="description">Masukkan Nama Kelurahan.</p>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="form-button">
            <div class="buttonWrapper">
                <a href="<c:url value='/kelurahan'/>" class="back">Kembali</a>
            </div>
            <input type="submit" value="Simpan" name="submit_1" id="submit_1"/>
            <input class="grey" type="reset" value="Hapus" name="reset_1" id="reset_1"/>
        </div>
    </form:form>
</div>
